<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
     <div class=" mt-4 mb-4 " style="font-size: 24px">
           Primary modal
       </div>
       <div class=" mt-4  pt-4 " style="">
           Primary modal with action buttons
       </div>

        <dfault-vuew>
            <template v-slot:htm>
                <div class="d-flex" style="width: 100%;height: 550px">
                    <div class="col-8  po-r" style="height: 100%;background: rgba(68, 69, 69, 0.4);" >
                        <div class="unis-modal-primary d-flex flex-column">
                            <div class=" d-flex  p-4 justify-content-between wid100" >
                                <h2>Headline 2</h2>
                                <i class="f-24 icon-30 cursor-p"></i>
                            </div>
                            <div class="content-box  pl-4 pr-4" >
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sollicitudin magna. Suspendisse arcu urna, viverra quis maximus eget, sollicitudin a ipsum.Lorem ipsum dolor sit amet,
                            </div>
                            <div class=" mt-auto wid100 p-4">
                                <div class="d-flex justify-content-end">
                                    <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                                    <button class="unis-btn unis-btn-primary ">Primary</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </template>
            <template v-slot:htmcode>
                <div class="col-8  po-r" style="height: 100%;background: rgba(68, 69, 69, 0.4);" >
                    <div class="unis-modal-primary d-flex flex-column">
                        <div class=" d-flex  p-4 justify-content-between wid100" >
                            <h2>Headline 2</h2>
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>
                        <div class="content-box  pl-4 pr-4" >
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sollicitudin magna. Suspendisse arcu urna, viverra quis maximus eget, sollicitudin a ipsum.Lorem ipsum dolor sit amet,
                        </div>
                        <div class=" mt-auto wid100 p-4">
                            <div class="d-flex justify-content-end">
                                <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                                <button class="unis-btn unis-btn-primary ">Primary</button>
                            </div>
                        </div>
                    </div>


                </div>
            </template>
        </dfault-vuew>
       <div class=" " style="margin-top: 180px">
           Modal minimum and maximum size for select modals
       </div>
       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flex  flex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <i class="f-24 icon-30 cursor-p"></i>
                       </div>
                       <div class="d-flex wid-100">
                           <div class="col pl-4  pr-4  align-self-stretch content-box">
                               <h4>Payment method</h4>
                               <div class="mt-4 pr-4">
                                   <label>Choose payment method</label>
                                   <div class="unis-select ft-grey500">
                                       Mastercard ending in 1244
                                   </div>
                               </div>
                               <div class="mt-4 pr-4">
                                   <input type="checkbox" name="layout" id="1na4me2" class="unis-checkbox">
                                   <label for="1na4me2" class="m-0 pl-3_5">Apply UNIS credit $200.00 available</label>
                               </div>
                           </div>
                           <div class="align-self-stretch partition" style="width:1px;"></div>
                           <div class="col  align-self-stretch pl-4 content-box">
                               <h4>(2) Invoices outstanding</h4>
                               <div class="mt-4 d-flex justify-content-between">
                                   <span>Invoice #2773225-1</span>
                                   <span>$100.00</span>

                               </div>
                               <div class="mt-4 d-flex justify-content-between">
                                   <h4>Invoice #2773225-1</h4>
                                   <h4>$100.00</h4>

                               </div>
                           </div>
                       </div>
                       <div class=" mt-auto wid100  p-4">
                           <div class="d-flex justify-content-end">

                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>

                       </div>


                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flex  flex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <i class="f-24 icon-30 cursor-p"></i>
                       </div>
                       <div class="d-flex wid-100">
                           <div class="col pl-4  pr-4  align-self-stretch content-box">
                               <h4>Payment method</h4>
                               <div class="mt-4 pr-4">
                                   <label>Choose payment method</label>
                                   <div class="unis-select ft-grey500">
                                       Mastercard ending in 1244
                                   </div>
                               </div>
                               <div class="mt-4 pr-4">
                                   <input type="checkbox" name="layout" id="1na4me22" class="unis-checkbox">
                                   <label for="1na4me22" class="m-0 pl-3_5">Apply UNIS credit $200.00 available</label>
                               </div>
                           </div>
                           <div class="align-self-stretch partition" style="width:1px;"></div>
                           <div class="col  align-self-stretch pl-4 content-box">
                               <h4>(2) Invoices outstanding</h4>
                               <div class="mt-4 d-flex justify-content-between">
                                   <span>Invoice #2773225-1</span>
                                   <span>$100.00</span>

                               </div>
                               <div class="mt-4 d-flex justify-content-between">
                                   <h4>Invoice #2773225-1</h4>
                                   <h4>$100.00</h4>

                               </div>
                           </div>
                       </div>
                       <div class=" mt-auto wid100  p-4">
                           <div class="d-flex justify-content-end">

                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>

                       </div>


                   </div>
               </div>
           </template>
       </dfault-vuew>
       <div class=" " style="margin-top: 180px">
           Modal minimum and maximum size for select modals
       </div>
       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flex  flex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <i class="f-24 icon-30 cursor-p"></i>
                       </div>
                       <div class="d-flex wid-100">
                           <div class="col pl-4  pr-4  align-self-stretch content-box">
                               <h4>Payment method</h4>
                               <div class="mt-4 pr-4">
                                   <label>Choose payment method</label>
                                   <div class="unis-select ft-grey500">
                                       Mastercard ending in 1244
                                   </div>
                               </div>
                               <div class="mt-4 pr-4">
                                   <input type="checkbox" name="layout" id="1name2" class="unis-checkbox">
                                   <label for="1name2" class="m-0 pl-3_5">Apply UNIS credit $200.00 available</label>
                               </div>
                           </div>
                           <div class="align-self-stretch partition" style="width:1px;"></div>
                           <div class="col  align-self-stretch pl-4  pr-4 content-box">
                               <h4>(2) Invoices outstanding</h4>
                               <div class="mt-4 d-flex justify-content-between" v-for=" i in 15">
                                   <span>Invoice #2773225-1</span>
                                   <span>$100.00</span>

                               </div>
                               <div class="mt-4 d-flex justify-content-between">
                                   <h4>Invoice #2773225-1</h4>
                                   <h4>$100.00</h4>

                               </div>
                           </div>
                       </div>
                       <div class=" mt-auto wid100  p-4">
                           <div class="d-flex justify-content-end">

                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>

                       </div>


                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flex  flex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <i class="f-24 icon-30 cursor-p"></i>
                       </div>
                       <div class="d-flex wid-100">
                           <div class="col pl-4  pr-4  align-self-stretch content-box">
                               <h4>Payment method</h4>
                               <div class="mt-4 pr-4" >
                                   <label>Choose payment method</label>
                                   <div class="unis-select ft-grey500">
                                       Mastercard ending in 1244
                                   </div>
                               </div>
                               <div class="mt-4 pr-4">
                                   <input type="checkbox" name="layout" id="1name2" class="unis-checkbox">
                                   <label for="1name2" class="m-0 pl-3_5">Apply UNIS credit $200.00 available</label>
                               </div>
                           </div>
                           <div class="align-self-stretch partition" style="width:1px;"></div>
                           <div class="col  align-self-stretch pl-4 pr-4 content-box">
                               <h4>(2) Invoices outstanding</h4>
                               <div class="mt-4 d-flex justify-content-between" v-for=" i in 60">
                                   <span>Invoice #2773225-1</span>
                                   <span>$100.00</span>

                               </div>
                               <div class="mt-4 d-flex justify-content-between">
                                   <h4>Invoice #2773225-1</h4>
                                   <h4>$100.00</h4>

                               </div>
                           </div>
                       </div>
                       <div class=" mt-auto wid100  p-4">
                           <div class="d-flex justify-content-end">

                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>

                       </div>


                   </div>
               </div>
           </template>
       </dfault-vuew>

       <dfault-vuew>
       <template v-slot:htm>
           <div class="d-flex" style="width: 100%;">
               <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                   <div class="d-flex p-4 justify-content-between wid100">
                       <h2>Pay outstanding balance</h2>
                       <div>
                           <button class="unis-icon-btn">
                               <i class="icon-30 cursor-p"></i>
                           </button>
                       </div>

                   </div>
                   <div class="d-flex wid-100 p-4 content-box" >
                       <div style="height: 200px;"></div>

                   </div>
                   <div class="mt-auto wid100 ">
                       <div class="d-flex justify-content-end p-4">
                           <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                           <button class="unis-btn unis-btn-primary ">Primary</button>
                       </div>


                   </div>
               </div>
           </div>

       </template>
       <template v-slot:htmcode>
           <div class="d-flex" style="width: 100%;">
               <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                   <div class="d-flex p-4 justify-content-between wid100">
                       <h2>Pay outstanding balance</h2>
                       <div>
                           <button class="unis-icon-btn">
                               <i class="icon-30 cursor-p"></i>
                           </button>
                       </div>

                   </div>
                   <div class="d-flex wid-100 p-4 content-box" >

                   </div>
                   <div class="mt-auto wid100 ">
                       <div class="d-flex justify-content-end p-4">
                           <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                           <button class="unis-btn unis-btn-primary ">Primary</button>
                       </div>


                   </div>
               </div>
           </div>
       </template>
   </dfault-vuew>

       <div style="height: 120px"></div>

       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <div>
                               <button class="unis-icon-btn">
                                   <i class="icon-30 cursor-p"></i>
                               </button>
                           </div>

                       </div>
                       <div class="d-flex wid-100 p-4 content-box" >
                           <div style="height: 700px;"></div>
                       </div>
                       <div class="mt-auto wid100 ">
                           <div class="d-flex justify-content-end p-4">
                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>


                       </div>
                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-between wid100">
                           <h2>Pay outstanding balance</h2>
                           <div>
                               <button class="unis-icon-btn">
                                   <i class="icon-30 cursor-p"></i>
                               </button>
                           </div>

                       </div>
                       <div class="d-flex wid-100 p-4 content-box" >
                           <div style="height: 700px;"></div>
                       </div>
                       <div class="mt-auto wid100 ">
                           <div class="d-flex justify-content-end p-4">
                               <button class="unis-btn unis-btn-secondary mr-3">Secondary</button>
                               <button class="unis-btn unis-btn-primary ">Primary</button>
                           </div>


                       </div>
                   </div>
               </div>
           </template>
       </dfault-vuew>
       <div style="height: 120px"></div>
       <dfault-vuew>
           <template v-slot:htm>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-end wid100">
                           <h2 class=" col mr-auto">Label</h2>
                           <div class="ml-auto mr-3">
                               <i class="f-24 icon-17 cursor-p"></i>
                           </div>
                           <div class="ml-auto ">
                               <i class="f-24 icon-30 cursor-p"></i>
                           </div>

                       </div>
                       <div class=" ml-4 mr-4 br-t-1 br-disabled" ></div>
                       <div class="d-flex wid-100 content-box" >
                           <div class="d-flex wid-100">
                               <div class="col pl-4  pr-4  align-self-stretch content-box">
                                   <div class="mt-4 pr-4" v-for="i in 4">
                                       <label>Label text</lable>
                                       <input type="text" placeholder="text" class="unis-display-input pl-0">
                                   </div>

                               </div>
                               <div class="col  align-self-stretch pl-4 content-box">
                                   <div class="mt-4 pr-4"  v-for="i in 4">
                                       <label>Label text</lable>
                                       <input type="text" placeholder="text" class="unis-display-input pl-0">
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>

           </template>
           <template v-slot:htmcode>
               <div class="d-flex" style="width: 100%;">
                   <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                       <div class="d-flex p-4 justify-content-end wid100">
                           <h2 class=" col mr-auto">Label</h2>
                           <div class="ml-auto mr-3">
                               <i class="f-24 icon-17 cursor-p"></i>
                           </div>
                           <div class="ml-auto ">
                               <i class="f-24 icon-30 cursor-p"></i>
                           </div>

                       </div>
                       <div class=" ml-4 mr-4 br-t-1 br-disabled" ></div>
                       <div class="d-flex wid-100 content-box" >
                           <div class="d-flex wid-100">
                               <div class="col pl-4  pr-4  align-self-stretch content-box">
                                   <div class="mt-4 pr-4" v-for="i in 4">
                                       <label>Label text</lable>
                                       <input type="text" value="Input Text" class="unis-display-input">
                                   </div>

                               </div>
                               <div class="col  align-self-stretch pl-4 content-box">
                                   <div class="mt-4 pr-4"  v-for="i in 4">
                                       <label>Label text</lable>
                                       <input type="text" value="Input Text" class="unis-display-input">
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </template>
       </dfault-vuew>

    <div class=" mt-4 mb-4 " style="font-size: 18px; margin-top: 80px">
        Modal/ Title-left
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <h2 class=" col mr-auto p-0">Title</h2>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>

                    </div>
                    <div class="d-flex wid-100 content-box" style="height: 260px;">

                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <h2 class=" col mr-auto p-0">Title</h2>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>

                </div>
                <div class="d-flex wid-100 content-box" style="height: 260px;">

                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 mb-4 " style="font-size: 18px; margin-top: 80px">
        Modal/ Title-center
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <h2 class=" col mr-auto p-0 t-center">Title</h2>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>

                    </div>
                    <div class="d-flex wid-100 content-box" style="height: 260px;">

                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <h2 class=" col mr-auto p-0 f-32 t-center">Title</h2>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>

                </div>
                <div class="d-flex wid-100 content-box" style="height: 260px;">

                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 mb-4 " style="font-size: 18px; margin-top: 80px">

    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <h2 class=" col mr-auto p-0">Share Quote</h2>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>
                    </div>
                    <div class="d-flex flex-column wid100 content-box" style="height: 260px;">
                        <div class="d-flex p-2">
                            <div class="col-9">
                                <input type="text" placeholder="Enter an Email Address"
                                       class="unis-input large-input "></div>
                            <div class="col d-flex justify-content-end">
                                <button class="unis-btn unis-btn-primary ">Primary</button>
                            </div>
                        </div>
                        <div class="d-flex mt-4">
                            <div class="col-12 pl-4">
                                <div class="unis-doubt-large">
                                    <div class="newicon-87"></div>
                                    <div class="tooltip-centre centre-right">
                                        <div class="content">
                                            <div class="popoverd">
                                                <div class="title-content p-2 f-18 ft-grey900  bg-grey900"
                                                     style="width: 317px;">
                                                    <span class="ft-rejected f-14">Freight delivered to a home or business address either curbside or directly to the doorstep</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <h2 class=" col mr-auto p-0">Share Quote</h2>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>
                </div>
                <div class="d-flex flex-column wid100 content-box" style="height: 260px;">
                    <div class="d-flex">
                        <div class="col-9">
                            <input type="text" value="Inactive"
                                   class="unis-input large-input "></div>
                        <div class="col-2">
                            <button class="unis-btn unis-btn-primary ">Primary</button>
                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <div class="col-12 pl-4">
                            <div class="unis-doubt-large">
                                <div class="newicon-87"></div>
                                <div class="tooltip-centre centre-right">
                                    <div class="content">
                                        <div class="popoverd">
                                            <div class="title-content p-2 f-18 ft-grey900  bg-grey900"
                                                 style="width: 317px;">
                                                <span class="ft-rejected f-14">Freight delivered to a home or business address either curbside or directly to the doorstep</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </template>
    </dfault-vuew>

    <div class=" mt-4 mb-4 " style="font-size: 18px; margin-top: 80px">

    </div>



    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <h2 class=" col mr-auto p-0">Save Quote</h2>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>
                    </div>
                    <div class="d-flex flex-column wid100 content-box" style="height: 260px;">
                        <div class="d-flex p-2">
                        <div class="col-12 "> The quote will be sent to the email address provided below.</div>
                        </div>
                        <div class="d-flex mt-4 p-2 justify-content-between">
                            <div class="col-9">
                                <input type="text" placeholder="Enter an Email Address"
                                       class="unis-input large-input "></div>
                            <div class="col d-flex justify-content-end">
                                <button class="unis-btn unis-btn-primary ">Primary</button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <h2 class=" col mr-auto p-0">Share Quote</h2>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>
                </div>
                <div class="d-flex flex-column wid100 content-box" style="height: 260px;">
                    <div class="d-flex p-2">
                        <div class="col-12"> The quote will be sent to the email address provided below.</div>
                    </div>
                    <div class="d-flex mt-4 p-2">
                        <div class="col-9">
                            <input type="text" value="Inactive"
                                   class="unis-input large-input "></div>
                        <div class="col d-flex justify-content-end">
                            <button class="unis-btn unis-btn-primary ">Primary</button>
                        </div>
                    </div>


                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 mb-4 " style="font-size: 18px; margin-top: 80px">

    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <h2 class=" col mr-auto p-0 t-center">Login</h2>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>
                    </div>
                    <div class="wid100 content-box" style="height: 320px;">
                        <div class="d-flex flex-wrap">
                            <div class="col-12">
                                <label>Email or Username</label>
                                <input type="text" placeholder="Helper Text"
                                       class="unis-input large-input "></div>
                            <div class="col-12 mt-4">
                                <label>Password</label>
                                <div class="po-r">
                                    <input type="text" value=""
                                           class="unis-input large-input ">

                                        <i class="icon-60 po-a mt-2"  style="right: 10px; top: 0;" ></i>


                                </div>

                            </div>
                            <div class="col-12 mt-4 d-flex justify-content-end pr-0">
                                <button class="unis-btn unis-btn-wIcon compact  ">
                                    <span class="mr-2">Forgot Password?</span>
                                </button>
                            </div>
                            <div class="col-12 mt-4  ">
                                <button class="unis-btn full unis-btn-primary ">Login</button>
                            </div>
                        </div>



                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 764px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <h2 class=" col mr-auto p-0">Share Quote</h2>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>
                </div>
                <div class="d-flex flex-column wid100 content-box" style="height: 260px;">
                    <div class="d-flex">
                        <div class="col-9">
                            <input type="text" value="Inactive"
                                   class="unis-input large-input "></div>
                        <div class="col-2">
                            <button class="unis-btn unis-btn-primary ">Primary</button>
                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <div class="col-12 pl-4">
                            <div class="unis-doubt-large ">
                                <div class="newicon-87"></div>
                                <div class="tooltip-centre centre-right">
                                    <div class="content">
                                        <div class="popoverd">
                                            <div class="title-content p-2 f-18 ft-grey900  bg-grey900"
                                                 style="width: 317px;">
                                                <span class="ft-rejected f-14">Freight delivered to a home or business address either curbside or directly to the doorstep</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </template>
    </dfault-vuew>


    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 545px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <div class="f-b col mr-auto p-0">Calculate My Class</div>
                        <div class="ml-auto ">
                            <i class="f-24 icon-30 cursor-p"></i>
                        </div>
                    </div>
                    <div class="d-flex flex-column wid100 content-box" style="height: 320px;">
                        <div class="d-flex p-2">
                            <div class="col-12  ">  Class is determined by your product type and overall weight. Learn more about how your class is determined<button class="unis-btn unis-btn-link ft-oceanblue700">here</button> .</div>
                        </div>
                        <div class="d-flex mt-2 p-2 justify-content-between">
                            <div class="col-7">
                                <label>Category Type <span class="ft-red900">*</span></label>
                                <div class="unis-select ft-grey300 ">
                                    Select one
                                </div>
                            </div>
                            <div class="col-5  ">
                                <label>Weight Per Unit  <span class="ft-red900">*</span></label>
                                <input type="text" placeholder="Helper Text" class="unis-input">
                            </div>
                        </div>
                        <div class="  mt-4 p-4  ">

                                <button class="unis-btn full  unis-btn-primary ">Calculate My Class</button>

                        </div>


                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 545px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <div class="f-b col mr-auto p-0">Calculate My Class</div>
                    <div class="ml-auto ">
                        <i class="f-24 icon-30 cursor-p"></i>
                    </div>
                </div>
                <div class="d-flex flex-column wid100 content-box" style="height: 320px;">
                    <div class="d-flex p-2">
                        <div class="col-12 ">  Class is determined by your product type and overall weight. Learn more about how your class is determined<button class="unis-btn unis-btn-link ft-oceanblue700">here</button> .</div>
                    </div>
                    <div class="d-flex mt-2 p-2 justify-content-between">
                        <div class="col-7">
                            <label>Category Type <span class="ft-red900">*</span></label>
                            <div class="unis-select ft-grey300 ">
                                Select one
                            </div>
                        </div>
                        <div class="col-5  ">
                            <label>Weight Per Unit  <span class="ft-red900">*</span></label>
                            <input type="text" placeholder="Helper Text" class="unis-input ">
                        </div>
                    </div>
                    <div class="  mt-4 p-4  ">

                        <button class="unis-btn full  unis-btn-primary ">Calculate My Class</button>

                    </div>


                </div>
            </div>
        </template>
    </dfault-vuew>



    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex" style="width: 100%;">
                <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 688px">
                    <div class="d-flex p-4 justify-content-end wid100">
                        <div class="f-b col mr-auto p-0">Save Quote</div>
                    </div>
                    <div class="d-flex flex-column wid100 content-box" style="height: 135px;">
                        <div class="d-flex p-2 pt-0">
                            <div class="col-12 "> Learn how to properly package your items <button class="unis-btn unis-btn-link ft-oceanblue700">here</button> .</div>
                        </div>
                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-modal-select d-flexflex-column align-items-start" style="width: 688px">
                <div class="d-flex p-4 justify-content-end wid100">
                    <div class="f-b col mr-auto p-0">Save Quote</div>
                </div>
                <div class="d-flex flex-column wid100 content-box" style="height: 135px;">
                    <div class="d-flex p-2 pt-0">
                        <div class="col-12  "> Learn how to properly package your items <button class="unis-btn unis-btn-link ft-oceanblue700">here</button> .</div>
                    </div>
                </div>
            </div>
        </template>
    </dfault-vuew>
    <div style="height: 120px"></div>
</div>


<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">

  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>